<template>
  <quill-editor
    :options="quillOption"
    v-model="content"
    :content="value"
    ref="editor"
    @blur="onEditorBlur($event)"
    @change="onEditorChange($event)"
  ></quill-editor>
</template>

<script>
import { quillEditor } from "vue-quill-editor";
import quillConfig from "@/utils/quill.js";
import {Bubble} from "@/utils/quill.js";

import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";

export default {
  name: "editor",
  props: {
    value: {
      type: String,
      default: ""
    },
    type: {
      type: String,
      default: 'snow'
    }
  },
  components: {
    quillEditor
  },
  data() {
    return {
      content: this.value,
      quillOption: this.type == 'snow' ?quillConfig:Bubble
      // quillOption: quillConfig
    };
  },
  mounted () {
    this.type;
  },
  methods: {
    onEditorBlur() {
      
    }, // 失去焦点事件
    onEditorChange() {
      this.$emit('on-change', this.content)
    } // 内容改变事件
  }
};
</script>
